<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>

		<div id="app">
			<p>总的点击次数: {{ c1+c2}}</p>
			<mycounter name="跳高计数器"  @getnum="getDataMethod1"></mycounter>
			<mycounter name="三级跳远计数器" @getnum="getDataMethod2"></mycounter>

		</div>
		
		<!-- vuejs组件中的模板 必须只有一个跟标签 -->
		<template id="template">
			<div>
				{{name}}:  <input type="button" :value="'当前点击次数:'+counter"  @click="addCounter()"  />
				
				
			</div>
		</template>
		

		<script>
			let mycounter = {
				template: "#template",
				//定义属性
				props:[
					'name'
				],
				//组件的data 要求是一个函数， 函数需要返回 json数据
				data() {
					return {
						counter: 0
					}
				},
				methods: {
					addCounter() {
						this.counter++
						//通过事件将 内部的数据 通过事件 传递给外部的事件监听
						//发送自定义的事件
						this.$emit("getnum",this.counter)
						
					}
				}
			}

			//只有跟 Vue对象的date 声明时 JSON对象
			let vm = new Vue({
				el: '#app',
				components: {
					'mycounter': mycounter
				},
				data: {
					c1:0,
					c2:0,
				},
				methods: {
					getDataMethod1(counter){
						console.log('跳高计数器 产生getNum的事件 '+counter)
						this.c1 = counter;
					},
					getDataMethod2(counter){
						console.log('三级跳计数器 产生getNum的事件 '+counter)
						this.c2 = counter;
					}
				}

			});
		</script>

	</body>
</html>
